<!--店铺管理页 StoreView.vue-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">信息管理</span>
    <el-button type="primary" style="float:right;margin-top:13px;" @click="beforeAddActivity">新建活动</el-button>
  </div>
  <!-- 分类查询条件卡片 -->
  <el-card style="margin:20px;height: 120px;">
    <el-form :inline="true">
      <el-form-item label="活动标题" style="width:320px;">
        <el-input placeholder="请输入活动标题"
                  v-model="searchForm.name" ></el-input>
      </el-form-item>
      <el-form-item label="活动类型" style="width:320px;">
        <el-select placeholder="请选择活动状态" v-model="searchForm.type" >
          <el-option label="全部" value="0"/>
          <el-option label="赠领" value="1"/>
          <el-option label="拼团" value="2"/>
          <el-option label="抽奖" value="3"/>
          <el-option label="砍一刀" value="4"/>
        </el-select>
      </el-form-item>
      <el-form-item label="活动渠道" style="width:320px;">
        <el-select placeholder="请选择活动渠道" v-model="searchForm.channel" >
          <el-option label="全部" value="0"/>
          <el-option label="APP" value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item label="活动状态" style="width:320px;">
        <el-select placeholder="请选择活动状态" v-model="searchForm.status">
          <el-option label="全部" value="0"/>
          <el-option label="未开始" value="1"/>
          <el-option label="进行中" value="2"/>
          <el-option label="已结束" value="3"/>
        </el-select>
      </el-form-item>
      <el-form>
        <el-form-item label="营销方式" style="width:320px;">
          <el-select placeholder="请选择营销方式" v-model="searchForm.market">
            <el-option label="全部" value="0"/>
            <el-option label="内容推送" value="1"/>
            <el-option label="消息推送" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间" style="width:320px;">
          <el-date-picker
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss"
              v-model="times"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-form>
  </el-card>
  <!-- 店铺列表表格数据 -->
  <el-card style="margin:20px;">
    <h3>店铺列表</h3>
    <el-table stripe :data="tableData">
      <el-table-column label="编号" prop="id" type="index" align="center" width="100"></el-table-column>
      <el-table-column label="活动标题" prop="activityName" align="center"></el-table-column>
      <el-table-column label="活动目标" prop="name" align="center"></el-table-column>
      <el-table-column label="活动类型" prop="status" align="center"></el-table-column>
      <el-table-column label="活动奖励" prop="reward" align="center"></el-table-column>
      <el-table-column label="店铺" prop="store" align="center"></el-table-column>
      <el-table-column label="渠道" prop="channel" align="center"></el-table-column>
      <el-table-column label="营销方式" prop="market" align="center"></el-table-column>
      <el-table-column label="活动时间" prop="time" align="center"></el-table-column>
      <el-table-column label="活动状态" align="center">
        <template #default="scope">
          <el-switch inactive-value="0" active-value="1" v-model="scope.row.status"
                     @change="changeStatus(scope.row.id,scope.row.status)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button type="primary" link @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="pagination-container">

      </div>
    </template>
  </el-card>
  <!-- 新建活动外层弹窗-->
  <el-dialog title="选择活动" v-model="addActivityDialogVisible" width="600px">
    <!-- 活动类型卡片区域 -->
    <div class="activity-cards">
      <el-card shadow="never"
               style="margin:20px 10px;text-align: center">
        <el-icon><User /></el-icon>
        <div>赠领</div>
      </el-card>
      <el-card shadow="never"
               style="margin:20px 10px;text-align: center" >
        <el-icon><Suitcase /></el-icon>
        <div>拼团</div>
      </el-card>
      <el-card shadow="never"
               style="margin:20px 8px;text-align: center">
        <el-icon><Watch /></el-icon>
        <div>秒杀</div>
      </el-card>
      <el-card shadow="never"
               style="margin:20px 8px;text-align: center">
        <el-icon><Money /></el-icon>
        <div>返现</div>
      </el-card>
      <el-card shadow="never"
               style="margin:20px 8px;text-align: center">
        <el-icon><Present /></el-icon>
        <div>抽奖</div>
      </el-card>
      </div>
    <!-- 新建活动按钮 -->
    <div class="create-btn-container">
      <el-button type="primary" @click="handleCreateActivity">新建活动</el-button>
    </div>
  </el-dialog>
  <!-- 新建活动内层弹窗 -->
  <el-dialog  title="基本信息" v-model="DialogVisible" style="padding:40px; font-weight: bold">
    <el-form style="margin:30px;">
      <el-form-item label="活动名称" style="width:300px;">
        <el-input  placeholder="请输入活动名称"
                  v-model="newStoreForm.activityName" >
        </el-input>
      </el-form-item>
      <el-form-item label="活动时间" style="width:300px;">
        <el-date-picker
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            v-model="times"
        ></el-date-picker>
      </el-form-item>
      <el-form-item  label="活动说明"  style="width:300px;">
        <el-input type="textarea" v-model="newStoreForm.activityDesc" ></el-input>
      </el-form-item>
    </el-form>
    <hr><h3>场景设计</h3>
    <el-form style="margin:30px;">
      <el-form-item label="活动目标"  style="width:300px;">
        <el-input placeholder="请输入活动目标" v-model="newStoreForm.activityGoal" ></el-input>
      </el-form-item>
      <el-form-item label="适用店铺">
        <el-button type="primary"   @click="handleSelectStore">指定店铺</el-button>
      </el-form-item>
      <el-form-item label="活动人群">
        <el-button type="primary"  @click="handleSelectGroup">指定人群</el-button>
      </el-form-item>
      <el-form-item label="自动化营销">
        <el-switch v-model="newStoreForm.autoMarket" ></el-switch>
      </el-form-item>
      <el-form-item label="投放渠道">
        <el-radio-group v-model="newStoreForm.channel">
          <el-radio  label="内容页面" value="1"></el-radio>
          <el-radio  label="定时推送" value="2"></el-radio>
          <el-radio  label="即时推送" value="3"></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <hr><h3>奖励设置</h3>
    <el-form style="margin:30px;">
    <el-form-item label="奖励类型">
      <el-radio-group v-model="newStoreForm.type">
        <el-radio  label="优惠卷" value="1"></el-radio>
        <el-radio  label="积分" value="2" disabled></el-radio>
        <el-radio  label="商品" value="3" disabled></el-radio>
      </el-radio-group>
    </el-form-item>
      <el-form-item label="活动奖励">
        <el-button  type="primary"  @click="handleSelectReword">活动奖励</el-button>
      </el-form-item>
    </el-form>
    <hr><h3>分享设置</h3>
      <el-form style="margin:30px;">
      <el-form-item label="文章摘要">
        <el-input type="textarea" v-model="newStoreForm.article" ></el-input>
      </el-form-item>
      <el-form-item label="短链接预览">
        <el-input  placeholder="http://"
                   prefix-icon="Link"
                  v-model="newStoreForm.shortLink" ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="savePush">发布</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!-- 选择适用店铺 -->
  <el-dialog title="选择适用店铺" v-model="selectStoreDialogVisible" width="600px">
    <el-form>
      <el-form-item label="适用店铺">
        <el-select placeholder="请选择适用店铺" style="width:300px;">
          <el-option label="胖东来" value="1" align="center"></el-option>
          <el-option label="海底捞" value="1" align="center"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!-- 选择人群弹窗 -->
  <el-dialog title="选择人群" v-model="selectGroupDialogVisible" width="600px">
    <el-form :inline="true">
      <el-form-item label="人群名称">
        <el-input  placeholder="请输入人群名称" style="width:300px;"
                  v-model="searchGroupForm.groupName" >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button  type="primary" @click="handleSearchGroup">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="groupTableData">
      <el-table-column label="序号" prop="id" type="index" align="center" width="100"></el-table-column>
      <el-table-column label="人群名称" prop="groupName" align="center"></el-table-column>
      <el-table-column label="人群描述" prop="groupDesc" align="center"></el-table-column>
      <el-table-column label="用户数量" prop="userNum" align="center"></el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="selectGroupDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveSelectGroup">确定</el-button>
    </template>
  </el-dialog>
  <!-- 选择活动奖励 -->
  <el-dialog title="选择活动奖励" v-model="selectRewordDialogVisible" width="800px">
    <el-form :inline="true" >
      <el-form-item label="优惠卷名称" style="width:300px;">
        <el-input  placeholder="请输入优惠卷名称" v-model="searchRewordForm.couponName">
        </el-input>
      </el-form-item>
      <el-form-item label="优惠卷类型"  style="width:300px;">
        <el-select placeholder="请选择优惠卷类型" v-model="searchRewordForm.couponType">
          <el-option label="满减券" value="0" align="center"></el-option>
          <el-option label="折扣券" value="1" align="center"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button  type="primary" @click="handleSearchGroup">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="couponTableData">
      <el-table-column label="序号" prop="id" type="index" align="center" width="100"></el-table-column>
      <el-table-column label="优惠卷名称" prop="couponName" align="center"></el-table-column>
      <el-table-column label="优惠卷类型" prop="couponType" align="center"></el-table-column>
      <el-table-column label="优惠内容" prop="couponContent" align="center"></el-table-column>
      <el-table-column label="总数量" prop="couponNum" align="center"></el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="selectGroupDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveSelectGroup">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import {ElIcon, ElMessage} from "element-plus";
import axios from "axios";
// 弹窗状态
// 外层
const addActivityDialogVisible=ref(false);
// 内层
const DialogVisible = ref(false);
// 选择适用店铺弹窗
const selectStoreDialogVisible = ref(false);
// 选择人群弹窗
const selectGroupDialogVisible = ref(false);
// 选择活动奖励弹窗
const selectRewordDialogVisible = ref(false);
// 新建活动按钮事件
const handleCreateActivity = () => {
  DialogVisible.value = true;
  console.log('触发新建活动流程');
};
// 指定店铺按钮事件
const handleSelectStore = () => {
  selectStoreDialogVisible.value = true;
  console.log('触发选择适用店铺');
}
// 指定人群按钮事件
const handleSelectGroup = () => {
  selectGroupDialogVisible.value = true;
  handleSearchGroup();
};
//活动奖励的优惠卷的搜索条件表单
const searchRewordForm=ref({couponName:'',couponType:''});
// 优惠卷表单列表
const couponTableData = ref([]);
// 指定活动奖励按钮事件
const handleSelectReword = () => {
  selectRewordDialogVisible.value = true;
  console.log('触发选择活动奖励');
};
//点击 新建门店弹窗出现
const beforeAddActivity = () => {
  addActivityDialogVisible.value = true;
}
// 选择人群搜索条件
const searchGroupForm=ref({groupName:''});
// 选择人群表单列表
const groupTableData = ref([]);
// 选择人群查询方法
const handleSearchGroup = () => {
  let data = qs.stringify(searchGroupForm.value);
  // axios.post('http://localhost:7071/admin/basic/userGroup/list',data).then((response)=>{
  //   groupTableData.value  = response.data.data;
  // })
};
// 选择人群弹窗保存方法
const saveSelectGroup = () => {
  console.log('保存选择人群');
}
const times = ref([]);
const tableData = ref([]);
//定义搜索条件的表单数据
const searchForm = ref({name: '', status: '', market: '', type: '', channel: ''})
//定义数组用来保存新建活动内层弹窗的表单数据
const newStoreForm = ref({
  activityName:'',
  activityDesc:'',
  activityGoal:'',
  autoMarket:false,
  channel:'',
  type:'',
  article:'',
  shortLink:'',
  activityReword:''
});
// 点击查询按钮
const handleSearch = () => {
  load();
};
//定义重置搜索的方法
const resetSearch = () => {
  searchForm.value = {};
};
// 编辑操作
const handleEdit = (row) => {
  console.log('编辑:', row);
  // 实际项目中可跳转编辑页或打开编辑弹窗
};
// 删除操作
const handleDelete = (row) => {
};
//定义加载店铺列表的方法
const load = () => {
  }
  onMounted(() => {
    load();
  })
//定义保存新建门店的方法
const savePush = () => {
    }
//定义修改店铺列表的启用状态的方法
const changeStatus = (id, status) => {
      let data = qs.stringify({id: id, status: status});
      // axios.post(BASE_URL+'/v1/geofence/save',data).then((response)=>{
      //   if(response.data.code==2000){
      //     ElMessage.success('状态修改成功!');
      //   }else{
      //     ElMessage.error(response.data.msg);
      //   }
      // })
    }

</script>
<style scoped>
.activity-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
  margin-bottom: 30px;
}
.create-btn-container {
  text-align: center;
}
h3{
  font-size: 16px;
  font-weight: bold;
}
</style>